<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>省市区(县)街道联动选择示例</title>
    <meta name="author" content="yupoxiong">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .margin {
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row" style="margin-top: 20px">
        <div class="col-md-12">

            <h3>普通省市区(县)街道联动选择Demo</h3>

            <form role="form">
                <div class="form-group">
                    <label for="province">省</label>
                    <select id="province" class="form-control" onchange="getRegion(this.value,1)">
                        <option>请选择省</option>
                    </select>
                    <label for="city">市</label>
                    <select id="city" class="form-control" onchange="getRegion(this.value,2)">
                        <option>请选择市</option>
                    </select>
                    <label for="district">区(县)</label>
                    <select id="district" class="form-control" onchange="getRegion(this.value,3)">
                        <option>请选择区(县)</option>
                    </select>
                    <label for="street">街道</label>
                    <select id="street" class="form-control">
                        <option>请选择街道</option>
                    </select>
                </div>
            </form>
        </div>

        <div class="col-md-12">
            <h3>搜索省Demo</h3>
            <form role="form" onsubmit="return search()">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="keywords" class="form-control" placeholder="输入中文或拼音或首字母搜索"
                               name="keywords">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-12">
            <h3>搜索结果</h3>
            <div class="row">
                <div class="col-md-12" id="result">
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    var regionId = ['#province', '#city', '#district', '#street'];
    var regionHtml = ['请选择省', '请选择市', '请选择区(县)', '请选择街道'];

    $(function () {
        getRegion(0, 0);
    });

    function getRegion(parent_id, level) {
        clearSon(level);
        var html = '<option value="-1">' + regionHtml[level] + '</option>';
        $.post('/region/getRegion', {parent_id: parent_id, level: level}, function (result) {
            $.each(result, function (index, item) {
                html += '<option value="' + item.id + '">' + item.name + '</option>'
            });
            $(regionId[level]).html(html);
        });
    }

    function clearSon(level) {
        for (var i = level + 1; i <= 4; i++) {
            var html = '<option value="-1">' + regionHtml[i] + '</option>';
            $(regionId[i]).html(html);
        }
    }

    function search() {
        var keywords = $('#keywords').val();
        $.post('/region/searchRegion', {keywords: keywords, parent_id: 0}, function (result) {
            var html = '';
            $.each(result, function (index, item) {
                html += '<span class="margin">' + item.name + '</span>';
            });
            $('#result').html(html);
        });

        return false;
    }
</script>
</body>
</html>